<template>
    <div class="gray_page">
        <!--展示信息-->
        <div class="on showMessage" v-if="showList">
            <dl>
                <dt><img :src="carList.imgUrl || '@/assets/bigcar.png'"></dt>
                <dd>
                    <h3>{{carList.seriesName}}</h3>
                    <p v-for="item in carList.priceList" :key="item.index">指导价：{{item.minPrice}}万~{{item.maxPrice}}万</p>
                </dd>
            </dl>
        </div>
        <!--填写信息-->
        <div class="compileMessage">
            <div class="titleinfo">购车信息</div>
            <div class="on">
                <div class="messList">
                    <p>经销商或公司</p>
                    <p>{{vkinfo.dealerName}}</p>
                </div>
                <div class="messList">
                    <p>姓名</p>
                    <p>{{vkinfo.name}}</p>
                </div>
                <div class="messList">
                    <p>手机号码</p>
                    <p>{{vkinfo.mobile}}</p>
                </div>
            </div>
        </div>
        <div class="btnSub" @click="submitClue">提交</div>
    </div>
</template>

<script>
import { buyCarinfo, vktokeninfo, getCarShopListDetails } from '@/api/api'
import { Toast, MessageBox } from 'mint-ui'
export default {
  name: '',
  data () {
    return {
      showList: true,
      carList: [],
      name: '',
      phonenumber: '',
      company: '',
      ticketValue: '',
      vkinfo: {},
      memberId: ''
    }
  },
  created () {
    this.getoken()
    this.getShopList()
  },
  methods: {
    getCookie (name) {
      var reg = new RegExp("(^| ) '+name+' = ([^;]*)(;|$)") // 正则匹配
      var arr = document.cookie.match(reg)
      if (arr) {
        return unescape(arr[2])
      } else {
        return null
      }
    },
    getoken () {
      this.ticketValue = this.getCookie('FOTONTGT')
      let tokenparam = {
        ticketName: 'FOTONTGT',
        ticketValue: this.ticketValue,
        isVeeker: '0'
      }
      // 时代微客token
      vktokeninfo(tokenparam).then(res => {
        this.vkinfo = res.data
        this.name = res.data.name
        this.phonenumber = res.data.mobile
        this.memberId = res.data.memberId
      })
    },
    getShopList () {
      let param = {
        series: this.$route.query.seriesName
      }
      // 车信息
      getCarShopListDetails(param).then(res => {
        this.carList = JSON.parse(res.data)
      })
    },
    // 购车人信息
    getDetail () {
      let param = {
        memberId: this.memberId,
        name: this.name,
        phone: this.phonenumber,
        optytype: '01',
        seriesName: this.$route.query.seriesName,
        dealer: this.vkinfo.dealerCode,
        brand: this.$route.query.brand,
        detail: this.$route.query.detail
      }
      if (param.name === '' || param.phone === '') {
        Toast({
          message: '信息不能为空'
        })
        return false
      }
      buyCarinfo(param).then(res => {
        if (res.code < 0) {
          Toast({
            message: res.msg
          })
          return false
        } else {
          Toast({
            message: '提交成功'
          })
          this.$router.go(-1)
        }
      })
    },
    // 提交信息
    submitClue () {
      MessageBox.confirm('是否确认提交该信息？').then(action => {
        this.getDetail()
      })
    }
  }
}
</script>

<style scoped>
.on {
    background: white;
    padding: 15px 30px;
    margin-bottom: 10px;
}

.showMessage dl {
    padding: 15px 0;
    display: flex;
}

.showMessage dl dt {
    width: 284px;
    height: 180px;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 14px;
}

.showMessage dl dt img {
    display: inline-block;
    width: 100%;
    height: 100%;
}

.showMessage dl dd {
    flex: 1;
    margin-left:15px;
}
.showMessage dl dd h3 {
    margin-top: .2rem;
    color:#323232;
    font-size:27px;
}

.showMessage dl dd p {
    font-size:28px;
    color: #FFA200;
    margin-top: .4rem;
}
</style>
